/**
 * 工厂页表格组件
 */
<script setup>
import { ref } from 'vue'

import EfficiencyTable from '@/components/factory/FactoryTables/EfficiencyTable.vue'
import RankingTable from '@/components/factory/FactoryTables/RankingTable.vue';

const selector = ref('型体工时效率')
</script>

<template>
  <div id="factory-table">
    <div class="factory-table-top">
      <el-radio-group
        v-model="selector"
        size="large"
      >
        <el-radio-button label="型体工时效率"/>
        <el-radio-button label="制程组别纯粹达成率级排名"/>
      </el-radio-group>
    </div>

    <div class="factory-table-bottom">
      <EfficiencyTable v-if="selector == '型体工时效率'"/>

      <RankingTable v-if="selector == '制程组别纯粹达成率级排名'"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#factory-table {
  width: 100%;
  height: 100%;

  .el-radio-button {
    --el-radio-button-checked-bg-color: #555;
    --el-radio-button-checked-text-color: white;
    --el-radio-button-checked-border-color: #555;
    --el-radio-button-disabled-checked-fill: gray;
  }

  &:deep(.el-radio-button__inner) {
    color: white;
    background-color: #555;
    border-color: black;
  }

  &:deep(.is-active .el-radio-button__inner) {
    color: black;
    background-color: #ddd;
  }

  .factory-table-top {
    padding: 2%;
  }

  .factory-table-bottom {
    width: 100%;
    height: 85%;
  }
}
</style>